<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import Apis from "@/services/modules/home"

import type { floorsState } from '@/types/home';
import type { PinHotInstance, PinSkuPanelInstance } from '@/types/component';

import NavGrid from './components/NavGrid.vue';
import PicGrid from './components/PicGrid.vue';

onLoad(() => {
  getHomeData()
})

const floorData = ref<floorsState[]>()
const getHomeData = async () => {
  const { data } = await Apis.getHomeDataApi('')
  floorData.value = JSON.parse(data.floors_)
}

const hotRef = ref<PinHotInstance>()

/* isTriggered */
const isTriggered = ref(false)
const onRefresherrefresh = async () => {
  isTriggered.value = true
  await getHomeData()
  isTriggered.value = false
}

const skuPanel = ref<PinSkuPanelInstance>()
const showSkuPanel = async (id: number) => {
  await skuPanel.value?.getData(`${id}`)
  uni.hideTabBar()
}

</script>

<template>
  <view class="home-container">
    <PinCustomBar />
    <scroll-view class="home-content" refresher-enabled @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered" :scroll-y="true">

      <view v-for="item in floorData" :key="item.seq_">
        <!-- 轮播图模块 -->
        <PinSwiper v-if="item.type_ == 1" :bannerData="item" />
        <!-- 导航模块 -->
        <NavGrid v-if="item.type_ == 2" :navData="item" />
        <!-- 热卖区域 -->
        <PinHot v-if="item.type_ == 3" ref="hotRef" @showSkuPanel="showSkuPanel" :hotParams="item" />
        <!-- 分类区域 -->
        <PicGrid v-if="item.type_ == 4" :picGridData="item" />
      </view>
    </scroll-view>
  </view>
  <PinSkuPanel ref="skuPanel" />
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .home-content {
    flex: 1;
  }
}
</style>
